<template>
  <div class="common-layout">
    <el-container>
      <!--左边-->
      <el-aside :width="isCollapse ? '64px' : '200px'" style="background: black;">
        <div style="color: white; height: 38px; text-align: center; line-height: 38px;">简易教学信息管理系统</div>
        <el-menu
            active-text-color="#ffd04b"
            background-color="rgb(51, 65, 87)"
            text-color="#fff"
            :unique-opened="true"
            :router="true"
            style="border-right: solid 0px var(--el-menu-border-color);"
            :collapse="isCollapse"
            :default-active="currentRouterPath"
            :collapse-transition="false">
          <el-sub-menu index="1">
            <template #title>
              <el-icon><OfficeBuilding /></el-icon>
              <span>老师信息管理</span>
            </template>
            <el-menu-item index="/teacherDash/teacher_info">
              <el-icon><Place /></el-icon>
              老师信息
            </el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="2">
            <template #title>
              <el-icon><Link /></el-icon>
              <span>学生信息管理</span>
            </template>
            <el-menu-item index="/teacherDash/student_info">
              <el-icon><Paperclip /></el-icon>
              学生信息
            </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="3">
            <template #title>
              <el-icon><Link /></el-icon>
              <span>课程信息管理</span>
            </template>
            <el-menu-item index="/teacherDash/course_info">
              <el-icon><Paperclip /></el-icon>
              课程信息
            </el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="4">
            <template #title>
              <el-icon><Link /></el-icon>
              <span>教师授课管理</span>
            </template>
            <el-menu-item index="/teacherDash/teacher_course_info">
              <el-icon><Paperclip /></el-icon>
              教师授课信息
            </el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="5">
            <template #title>
              <el-icon><Link /></el-icon>
              <span>学生选课管理</span>
            </template>
            <el-menu-item index="/teacherDash/student_course_info">
              <el-icon><Paperclip /></el-icon>
              学生选课信息
            </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="6">
            <template #title>
              <el-icon><Link /></el-icon>
              <span>学生成绩管理</span>
            </template>
            <el-menu-item index="/teacherDash/course_score_info">
              <el-icon><Paperclip /></el-icon>
              学生成绩
            </el-menu-item>
          </el-sub-menu>
        
        </el-menu>
      </el-aside>

      <el-container>
        <!--右侧头部-->
        <el-header style="background: aliceblue; height: 68px; line-height: 38px;">
          <div style="float: left;">
            <el-icon @click="collapse"><Fold /></el-icon>
          </div>
          <div style="float: right; padding-top: 10px;">
            <el-dropdown :hide-on-click="false">
            <span class="el-dropdown-link">
              {{ loginUserName }}
              <el-icon class="el-icon--right"><arrow-down /></el-icon>
            </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>我的资料</el-dropdown-item>
                  <el-dropdown-item>修改密码</el-dropdown-item>
                  <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>
        <!--右侧内容体-->
        <el-main style="height: calc(100vh)">

          <!--/dashboard子路由的页面在此处渲染显示-->
          <router-view v-if="isRouterAlive"/>

        </el-main>

        <!--右侧尾部-->
        <el-footer style="background: azure; height: 38px; line-height: 38px; text-align: center;">
          本系统由深山老林开发
        </el-footer>
      </el-container>

    </el-container>
  </div>
</template>

<script>
//从axios-http.js文件中导入doGet()这个函数功能，后缀.js可以省略
import {doGet} from "@/http/axios-http";
//从message.js文件中导入message()这个函数功能，后缀.js可以省略
import {message} from "@/http/message";

export default {

  data() {
    return {
      //控制左侧菜单水平方向的折叠和展开，false是展开，true是折叠
      isCollapse : false,
      //登录人的姓名，初始值是空的，在下面的函数中给它赋值
      loginUserName : '',
      //控制子路由页面的显示和隐藏, true表示显示，false表示隐藏
      isRouterAlive : true,
      //当前访问的路由路径，初始值是空
      currentRouterPath : ''
    }
  },

  //提供数据、功能、属性
  provide() {
    return {
      reload: ()=> {
        this.isRouterAlive = false; //不显示子路由页面，（隐藏子路由页面时候，子路由页面需要渲染加载一下）
        this.$nextTick( () => { //$nextTick函数在页面渲染时会被触发调用
          this.isRouterAlive = true; //显示子路由页面，又会触发页面渲染
        })
        //以上代码达到的效果就是 子路由页面 先隐藏一下，然后又显示出来
      },

      msg : "hello world", //提供了一个msg属性

      num : 1999 //提供了num属性
    }
  },

  //页面渲染dom的时候会触发调用
  mounted() {
    // this.loginInfo();
    this.loadCurrentRouterPath();
  },

  //methods里面是写js函数的
  methods : {
    //左侧菜单水平展开和折叠
    collapse() {
      this.isCollapse = !this.isCollapse;
    },

    //获取登录信息
    loginInfo() {
      let userJSON = window.sessionStorage.getItem("loginUser");
      if (!userJSON) {
        userJSON = window.localStorage.getItem("loginUser");
      }
      if (!userJSON) {
        //如果sessionStorage、localStorage中都没有登录信息，那么就跳转到登录页
        window.location.href = "/";
      }
      //把json字符串转成对象
      let userDTO = JSON.parse(userJSON);
      //给data()中定义的loginUserName赋值
      this.loginUserName = userDTO.name;
    },

    //退出登录
    logout() {
        window.sessionStorage.removeItem("userInfo");
        window.location.href = "/"
         
    },

    //拿到当前访问的路由路径
    loadCurrentRouterPath() {
      //alert(this.$route.path); //拿路由里面的信息，都是没有r的
      let path = this.$route.path;
      // /dashboard/activity/add
      // /dashboard/activity/3
      // index = /dashboard/activity
      let newPathArray = path.split("/");  ['', 'dashboard', 'activity', 'add']
      this.currentRouterPath = "/" + newPathArray[1] + "/" + newPathArray[2];
    }
  }
}
</script>